<template>
  <div class="sign">
    <div class="header">
      <span class="header__title">扫码登录</span>
    </div>
    <div>
      <scan-code
        id="login_container"
        redirectUrl="/redirect/sign"
        height="200px"
      ></scan-code>
    </div>
    <div class="sign__loginForm--changeType">
      <el-button type="text" @click="changeLoginType('phone')"
        >账号登录
      </el-button>
      <el-button type="text" @click="changeLoginType('code')"
        >验证码登录
      </el-button>
    </div>
    <el-button
      class="sign__loginForm--loginButton"
      type="primary"
      @click="submitForm"
      >登录
    </el-button>
  </div>
</template>

<script lang="ts">
import { Vue, Component, PropSync } from "vue-property-decorator";
import ScanCode from "@/components/ScanQrCode.vue";
import { scanCode } from "@/api/sign";
import storage from "@/libs/storage";

@Component({
  components: {
    ScanCode,
  },
})
export default class SignIn extends Vue {
  @PropSync("type", {
    type: String,
    required: true,
    default: "qrcode",
  })
  loginType: string;

  checkRole(data: {
    shopInfoVo: { roleInfoVo: { roleCode: string }[] };
  }): boolean {
    if (data.shopInfoVo.roleInfoVo[0].roleCode === "0" || "1") {
      return true;
    } else {
      this.$message.warning("请使用合伙人账号登录！");
      return false;
    }
  }

  submitForm() {
    scanCode({ code: storage.get("signCode") }).then(res => {
      const { data } = res;
      if (res.code === 200 && this.checkRole(data)) {
        if (data.id !== undefined) {
          this.$store.dispatch("user/setToken", data.token);
          this.$store.dispatch("user/setUserInfo", data);
          this.$router.push("/overview");
          storage.delete("signCode");
        }
      }
    });
  }

  changeLoginType(type) {
    this.loginType = type;
  }
}
</script>
